<template>
	<view>
		<picker-view :indicator-style="indicatorStyle" class="picker-view" @change="change">
			<picker-view-column>
				<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
			</picker-view-column>
		</picker-view>

		<view class="bomPosition">
			<button type="primary" @click="preserve">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorStyle: `height: 50px;`,
				years:[],
				months:[],
				days:[],
				value: [0, 0, 0],
			};
		},
		onLoad() {
			const date = new Date()
			const day = date.getDate()
			for (let i = 1950; i <= 2010; i++) {
				this.years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				this.months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				this.days.push(i)
			}
		},
		methods: {
			change(e) {
				console.log(e,'+++');
				this.value = e.detail.value
			},
			preserve() {
				let birthday = this.years[this.value[0]]+'-'+this.months[this.value[1]]+'-'+this.days[this.value[2]]
				uni.$emit('birthdayFn', birthday)
				uni.navigateBack({
					delta: 1
				})
			},
			bindChange(e) {
				
			},
		}
	}
</script>

<style lang="scss">
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
		background-color: #f6f6f6 !important;

		/deep/ picker-view-column {
			background-color: #f6f6f6 !important;
		}
	}

	/deep/ picker-view-column {
		background-color: #f6f6f6 !important;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
		font-weight: 600;
		font-size: 32rpx;
	}
</style>
